{include file="public/header" /}
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>编辑管理员</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <form class="form-horizontal" name="userEdit" id="userEdit" >
                        <input type="hidden" name="id" value="{$user.id}">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">管理员名称：</label>
                            <div class="input-group col-sm-4">
                                <input id="username" type="text" class="form-control" name="username" aria-required="true" value="{$user.username}" disabled>
                                <!--<span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 必填</span>-->
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">手机号：</label>
                            <div class="input-group col-sm-4">
                                <input id="phone" type="text" class="form-control" name="phone" aria-required="true" value="{$user.phone}" disabled>
                                <!--<span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 必填</span>-->
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label yanse">管理员角色：</label>
                            <div class="input-group col-sm-4">
                                <select class="form-control m-b chosen-select" name="groupid" id="groupid">
                                    <option value="">==请选择角色==</option>
                                    {if !empty($role)}
                                        {foreach name="role" item="vo"}
                                            <option value="{$vo.id}" {if condition="$user['groupid'] eq $vo['id']"}selected{/if}>{$vo.title}</option>
                                        {/foreach}
                                    {/if}
                                </select>
                                <span class="help-block m-b-none gro"><i class="fa fa-info-circle"></i> 必填</span>
                                <a id="myEditors" style="color:#A94543"></a>
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">头像：</label>
                            <div class="input-group col-sm-4">
                                <input type="hidden" id="data_photo" name="portrait" value="{$user.portrait}" />
                                <div id="fileList" class="uploader-list" style="float:right"></div>
                                <!--<div id="imgPicker" style="float:left">选择头像</div>-->
                                <div  style="float:left" class="btn btn-primary btn-outline" data-toggle="modal" disabled="">选择头像</div><!-- data-target="#myModal"-->
                                <img id="img_data" class="img-circle" height="80px" width="80px" style="float:left;margin-left: 50px;margin-top: -10px;cursor:pointer;" src="{$user.portrait}" onerror="this.src='/static/admin/images/head_default.gif'" onclick='imgDisplay(this)' />
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">登录密码：</label>
                            <div class="input-group col-sm-4">
                                <input id="password" type="password" class="form-control" name="password"  placeholder="输入修改密码">
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">真实姓名：</label>
                            <div class="input-group col-sm-4">
                                <input id="real_name" type="text" class="form-control" name="real_name" aria-required="true" value="{$user.real_name}" disabled>
                                <!--<span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 必填</span>-->

                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <div class="col-sm-4 col-sm-offset-3">
                                <button class="btn btn-primary btsave" type="submit"><i class="fa fa-save"></i> 保存</button>&nbsp;&nbsp;&nbsp;
                                <a class="btn btn-danger" href="javascript:history.go(-1);"><i class="fa fa-close"></i> 返回</a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

        </div>
    </div>
</div>
{include file="public/footer" /}
<div class="modal  fade" id="myModal" tabindex="-1" role="dialog"  aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h3 class="modal-title">编辑头像</h3>
            </div>
            <form class="form-horizontal" name="add_rule" id="add_rule">
                <div class="ibox-content">
                    <!--图片裁剪框 start-->
                    <div class="black-cloth" onclick="closeTailor(this)"></div>
                    <div class="tailoring-content">
                        <div class="tailoring-content-one">
                            <label title="选择图片" for="chooseImg" class="btn btn-primary btn-outline choose-btn">
                                <input type="file" accept="image/jpg,image/jpeg,image/png" name="file" id="chooseImg" class="hidden" onchange="selectImg(this)"><i class="fa fa-link"></i>
                                选择图片
                            </label>
                        </div>
                        <div class="tailoring-content-two">
                            <div class="tailoring-box-parcel" style="text-align: center">
                                <img id="tailoringImg">
                                <span class="word" style="position:relative;top:50%;font-size:16px">仅支持JPG、JPEG、PNG格式的图片文件</span><br>
                                <span class="size" style="position:relative;top:50%;font-size:16px">文件不能大于2MB</span>
                            </div>
                            <div class="preview-box-parcel">
                                <p>图片预览：</p>
                                <div class="square previewImg"></div>
                                <div class="circular previewImg"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--图片裁剪框 end-->
                <div class="modal-footer">
                    <span class="btn btn-primary btn-outline cropper-reset-btn" style="float:left">复位</span>
                    <span class="btn btn-primary btn-outline zoomIn" style="float:left">放大</span>
                    <span class="btn btn-primary btn-outline zoomOut" style="float:left">缩小</span>
                    <span class="btn btn-primary btn-outline cropper-rotate-btn" style="float:left">旋转</span>
                    <span  class="btn btn-primary btn-outline cropper-scaleX-btn" style="float:left">换向</span>
                    <span type="submit" class="btn btn-primary" id="sureCut"><i class="fa fa-save"></i> 保存</span>
                    <button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-close"></i> 关闭</button>
                </div>
            </form>
        </div>
    </div>
</div>
<script type="text/javascript" src="__JS__/Crop.js"></script>
<script type="text/javascript">
    // var $list = $('#fileList');
    // //上传图片,初始化WebUploader
    // var uploader = WebUploader.create({
    //     auto: true,// 选完文件后，是否自动上传。
    //     swf: '/static/admin/webupload/Uploader.swf',// swf文件路径
    //     server: "{:url('Upload/uploadface')}",// 文件接收服务端。
    //     duplicate :true,// 重复上传图片，true为可重复false为不可重复
    //     pick: '#imgPicker',// 选择文件的按钮。可选。
    //     accept: {
    //         title: 'Images',
    //         extensions: 'gif,jpg,jpeg,bmp,png',
    //         mimeTypes: 'image/jpg,image/jpeg,image/png'
    //     },
    //     'onUploadSuccess': function(file, data, response) {
    //         $("#data_photo").val(data._raw);
    //         $("#img_data").attr('src', '/uploads/face/' + data._raw).show();
    //     }
    // });
    //
    // uploader.on( 'fileQueued', function( file ) {
    //     $list.html( '<div id="' + file.id + '" class="item">' +
    //         '<h4 class="info">' + file.name + '</h4>' +
    //         '<p class="state">正在上传...</p>' +
    //     '</div>' );
    // });
    //
    // // 文件上传成功
    // uploader.on( 'uploadSuccess', function( file ) {
    //     $( '#'+file.id ).find('p.state').text('上传成功！');
    // });
    //
    // // 文件上传失败，显示上传出错。
    // uploader.on( 'uploadError', function( file ) {
    //     $( '#'+file.id ).find('p.state').text('上传出错!');
    // });
    $(".btsave").click(function(){
        var level = $("#groupid").val();
        if(level==""){
            $('.yanse').css("color","#ED5666");
            $('.chosen-single').css("border","1px solid #ED5666");
            $("#myEditors").css("display","");
            $("#myEditors").html("<i class='fa fa-times-circle'></i> 请选择管理员角色");
        }else {
            $('.yanse').css("color","#686B6D");
            $("#myEditors").css("display", "none");
        }
    })
    $("#groupid").change(function(){
        $('.yanse').css("color","#686B6D");
        $('#groupid_chosen').children().eq(0).css("border","1px solid #CBD5DD");
        $("#myEditors").css("display", "none");
    })


    //裁剪后的处理
    $("#sureCut").on("click",function () {
        if ($("#tailoringImg").attr("src") == null ){
            return false;
        }else{
            var cas = $('#tailoringImg').cropper('getCroppedCanvas');//获取被裁剪后的canvas
            var base64url = cas.toDataURL('image/png'); //转换为base64地址形式
            $("#img_data").attr('src',base64url).show();
            $('#data_photo').val(base64url);
            //关闭裁剪框
            $("#myModal").modal('hide');
        }
    });

    $.validator.setDefaults({
        highlight: function(e) {
            $(e).closest(".form-group").removeClass("has-success").addClass("has-error")
            $(e).closest(".form-control").css("color","#737373");
        },
        success: function(e) {
            // e.closest(".form-group").removeClass("has-error").addClass("has-success")
            e.closest(".form-group").removeClass("has-error")
        },
        errorElement: "span",
        errorPlacement: function(e, r) {
            e.appendTo(r.is(":radio") || r.is(":checkbox") ? r.parent().parent().parent() : r.parent())
            if(r.is("#groupid")){
                e.appendTo(r.parent());
            }
        },
        errorClass: "help-block m-b-none",
        validClass: "help-block m-b-none"
    }), $().ready(function() {
        var e = "<i class='fa fa-times-circle'></i> ";
        jQuery.validator.addMethod("selectNoe", function(value, element) {
            var returnVal = true;
            var level = $("#groupid").val();
            if(level==""){
                returnVal = false;
            }
            return returnVal;
        }, e+"请选择管理员角色");
        $("#userEdit").validate({
            rules: {
                username: {
                    required: !0,
                    minlength: 2,
                    maxlength: 20,
                    remote:"{:url('User/checkName')}?id="+$('input[name=id]').val(),
                },
                real_name: {
                    required: !0,
                    minlength: 2,
                    maxlength: 20,
                },
                groupid:{
                    selectNoe:true,
                },
                password: {
                    minlength: 5,
                    maxlength: 50,
                }

            },
            messages: {
                username: {
                    required: e + "请输入管理员名称",
                    minlength: e + "名称必须2个字符以上",
                    maxlength: e + "名称最长20个字符",
                    remote:e + "该名称已被使用"
                },
                real_name: {
                    required: e + "请输入管理员真实姓名",
                    maxlength: e + "真实姓名最长20个字符",
                },
                password: {
                    minlength: e + "密码必须5个字符以上",
                    maxlength: e + "密码最长50个字符",
                }
            },
            submitHandler: function(form) { //通过之后回调
//进行ajax传值
//                 var formData = new FormData($("#userAdd" )[0]);
                var level = $("#groupid").val();
                if(level==""){
                    $('.yanse').css("color","#ED5666");
                    $('.chosen-single').css("border","1px solid #ED5666");
                    $("#myEditors").css("display","");
                    $("#myEditors").html("<i class='fa fa-times-circle'></i> 请选择管理员角色");
                }else {
                    $('button').attr('disabled', 'disabled');
                    $.ajax({
                        url: "{:url('userEdit')}",
                        type: "post",
                        dataType: "json",
                        data: $("#userEdit").serialize(),
                        success: function (data) {
                            if (data.code == 200) {
                                if(data.data == 100){
                                    wk.success(data.msg,1,"{:url('admin/Login/loginOut')}");
                                }else{
                                    if (data.type == "have") {
                                        layer.msg(data.msg, {icon: 1, time: 1500, shade: 0.1}, function (index) {
                                            parent.location.reload();
                                        });
                                    } else {
                                        wk.success(data.msg,1,"{:url('user/index')}");
                                    }
                                }
                            } else {
                                $('button').removeAttr('disabled');
                                wk.success(data.msg,2,'');
                                return false;
                            }
                        }
                    });
                }
            },
        })
    });

</script>
</body>
</html>